<div class="jhi-article-component" *ngIf="article">
    <div class="banner">
        <div class="container">
            <h1>{{ article.title }}</h1>
            <article-meta [article]="article">

                <span [hidden]="!canModify">
          <a class="btn btn-sm btn-outline-secondary"
             [routerLink]="['/features/blog/editor', article.slug]">
            <i class="ion-edit"></i> Edit Article
          </a>

          <button class="btn btn-sm btn-outline-danger"
            [ngClass]="{disabled: isDeleting}"
            (click)="deleteArticle()">
            <i class="ion-trash-a"></i> Delete Article
          </button>
        </span>
                <span [hidden]="canModify">
          <jhi-follow-button
            [profile]="article.author">
          </jhi-follow-button>

          <jhi-favorite-button
            [article]="article">
            {{ article.favorited ? 'Unfavorite' : 'Favorite' }} Article <span class="counter">({{ article.favoritesCount }})</span>
                </jhi-favorite-button>
                </span>

            </article-meta>
        </div>
    </div>

    <div class="container page">

        <div class="row article-content">
            <div class="col-md-12">

                <div [innerHTML]="article.body | markdown"></div>

                <ul class="tag-list">
                    <li *ngFor="let tag of article.tagList" class="tag-default tag-pill tag-outline">
                        {{ tag }}
                    </li>
                </ul>

            </div>
        </div>

        <hr />

        <div class="article-actions">
            <article-meta [article]="article">

                <span [hidden]="!canModify">
          <a class="btn btn-sm btn-outline-secondary"
             [routerLink]="['/features/blog/editor', article.slug]">
            <i class="ion-edit"></i> Edit Article
          </a>

          <button class="btn btn-sm btn-outline-danger"
            [ngClass]="{disabled: isDeleting}"
            (click)="deleteArticle()">
            <i class="ion-trash-a"></i> Delete Article
          </button>
        </span>
                <span [hidden]="canModify">
          <jhi-follow-button
            [profile]="article.author">
          </jhi-follow-button>

          <jhi-favorite-button
            [article]="article">
            {{ article.favorited ? 'Unfavorite' : 'Favorite' }} Article <span class="counter">({{ article.favoritesCount }})</span>
                </jhi-favorite-button>
                </span>

            </article-meta>
        </div>
        <div class="row">
            <div class="col-xs-12 col-md-8 offset-md-2">

                <div *showAuthed="true">
                    <jhi-alert-error></jhi-alert-error>
                    <form class="card comment-form" (ngSubmit)="addComment()">
                        <fieldset [disabled]="article.loading">
                            <div class="card-block">
                                <textarea class="form-control" placeholder="Write a comment..." rows="3" [formControl]="commentControl"></textarea>
                            </div>
                            <div class="card-footer">
                                <img [src]="currentUserProfile.image" class="comment-author-img" />
                                <button class="btn btn-sm btn-primary" type="submit">
                 Post Comment
                </button>
                            </div>
                        </fieldset>
                    </form>
                </div>

                <div *showAuthed="false">
                    <a [routerLink]="['/login']">Sign in</a> or <a [routerLink]="['/register']">sign up</a> to add comments
                    on this article.
                </div>

                <jhi-article-comment *ngFor="let comment of comments" [comment]="comment" (deleteComment)="onDeleteComment(comment)">
                </jhi-article-comment>

            </div>
        </div>

    </div>
</div>
